<template>
    <div class="comment_box">
        <div class="edit_comment" id="commentEditor">
            <van-cell-group v-if="showCommentEditor" :border="false"  >
                <van-field
                        v-model="message"
                        label="留言"
                        type="textarea"
                        placeholder="请输入留言"
                        rows="2"
                        autosize

                />
                <br>

                <div style="text-align: right"><van-button type="default" size="small" @click="showCommentEditor=false">取消
                </van-button><van-button
                        type="info" size="small" @click="submitComment">发布</van-button></div>


                <br><br>
            </van-cell-group>
        </div>
        <div class="comment_list">
            <div class="comment_item" v-for="item in commentList">
                <div class="item_head">
                    <div class="head_img" :style="{backgroundImage:'url('+item.owner.headImg+')'}"></div>
                    <div class="comment_info">
                        <div class="user_name">{{item.owner.nickName}}</div>
                        <div class="create_time">{{item.createTime}}</div>
                    </div>
                </div>
                <div class="item_content">
                    {{item.content}}
                </div>
                <br><br>
            </div>
        </div>

        <div class="op_bar">

            <van-row>

                <van-col span="2" >
                    <van-icon name="arrow-up" size="0.50rem" color="#2c82d9" @click="setAttitude(item.id,1)"/>
                </van-col>
                <van-col span="3">
                    <span>+1500</span>
                </van-col>
                <van-col span="2">
                    <van-icon name="arrow-down" size="0.50rem" color="#2c82d9" @click="setAttitude(item.id,-1)"/>
                </van-col>

                <van-col span="2" offset="2">
                    <van-icon name="like-o" size="0.50rem" color="#2c82d9"/>
                </van-col>
                <van-col><span>10</span></van-col>


                <van-col span="2" offset="2">
                    <van-icon name="comment-o" size="0.50rem" color="#2c82d9" @click="toComment"/>
                </van-col>
                <van-col span="2">
                    <span>20</span>
                </van-col>
                <van-col span="2" offset="2">
                    <router-link to="/" replace ><van-icon name="home-o" size="0.50rem" color="#2c82d9"/></router-link>
                </van-col>
                <van-col span="2" >
                    <router-link to="/" replace >返回</router-link>
                </van-col>

            </van-row>



        </div>
    </div>
</template>

<script>
    import ltxService from '../services/LtxService'
    import {Toast} from "vant";
    export default {
        props:["paperId"],
        name: "Comment.vue",
        mounted(){
            this.refreshComment()
        },
        methods:{
            refreshComment()
            {
                ltxService.getComments(this.paperId).then(resp=>{
                    this.commentList=resp.data.data
                })
            },
            submitComment(){
                ltxService.addComment({content:this.message,objectId:this.paperId}).then(resp=>{
                    Toast({message:"发布成功",duration:300})
                    this.refreshComment()
                })
            },
            toComment()
            {
                this.showCommentEditor=true
                let div = document.getElementById('commentEditor');
                console.log(div.clientTop)
                window.scrollTo(0,div.offsetTop);
            }
            },
        data(){
            return{
                commentList:[],
                showCommentEditor:false,
                message:""
            }
        }
    }
</script>

<style lang="scss" scoped>
    .comment_box{
        padding: 20px 22px 12px;
        .comment_list{
            .comment_item{
                padding: 4px;
            }
        }
    }

    .item_content{
        padding:5px 20px 5px 48px;
        font-size: 14px;
    }

    .item_head{
        height: 36px;
        display: flex;

        .comment_info{
            padding-left: 12px;
            line-height: 18px;
            .user_name{
                font-size: 12px;

                color: #666;
            }
            .create_time{
                font-size: 12px;
                color: #999;
            }
        }
        .head_img{
        width: 36px;
            background-color: skyblue;
            border-radius: 18px;
        }
    }



    .op_bar{
        .van-row{
            height: 100%;
            padding: 12px;
            z-index: 100;
        }

        width: 100%;
        position: fixed;
        height: 40px;
        background-color: #fefefe;
        bottom: 0;
        left: 0;
    }


    .edit_comment{

        left: 0;
    }
</style>